<template>
  <div id="app">
    <div v-if="flag">
      <div v-if="books.length">
        <!--购物车内容列表 -->
      </div>
      <h2 v-else>购物车为空</h2>

      <table border="1" align="center" width="500">
        <caption>
          <h2>购物车</h2>
        </caption>
        <caption>
          <button id="ab" @click="a()">去商品表添加</button>
          <br />
          <br />
        </caption>

        <thead>
          <tr>
            <th></th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>合计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in books" :key="index" align="center">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ filter(item.price) }}</td>
            <td>
              <button
                @click="decrement(index)"
                v-bind:disabled="item.count <= 0"
              >
                -
              </button>
              {{ item.count }}
              <button @click="increment(index)">+</button>
            </td>
            <td>{{ item.price * item.count }}</td>
            <td>
              <button @click="removeHandle(index)">移除</button>
            </td>
          </tr>
          <tr align="center">
            <td colspan="2">总价格</td>
            <td colspan="4">{{ filter(computedName) }}</td>
          </tr>
        </tbody>
      </table>
      <button id="bc2" @click="del()">清空购物车</button>
    </div>
    <div v-else>
      <table border="1" align="center" width="500">
        <caption>
          <h2>商品表</h2>
        </caption>
        <caption>
          <button id="ab" @click="b()">查看购物车</button>
          <br />
          <br />
        </caption>
        <thead>
          <tr>
            <th>
              <input
                type="checkbox"
                v-model="checked"
                @change="changeAllChecked()"
              />
            </th>
            <th>名称</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody align="center">
          <tr v-for="(item, index) in books2" :key="index" align="center">
            <td>
              <input
                type="checkbox"
                :value="item"
                class="choose"
                v-model="checkedData"
              />
            </td>
            <td>{{ item.name }}</td>
            <td>{{ filter(item.price) }}</td>
            <td>
              <button id="button" @click="add(index)">添加</button>
            </td>
          </tr>
        </tbody>
      </table>
      <br />

      <button id="bc" @click="addAllHandle()">添加到购物车</button>
      <div class="checks"></div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from "vue";

export default {
  setup() {
    const state = reactive({
      flag: true,
      checked: false,
      checkedData: [],
      watch: {
        checkedData() {
          if (this.checkedData.length == this.books2.length) {
            //全选
            this.checked = true;
          } else {
            this.checked = false;
          }
        },
      },

      books: [
        // 定义图书对象数组
        {
          id: 1,
          name: "华为mate30",
          price: 3465,
          count: 2,
        },
        {
          id: 2,
          name: "华为mate40",
          price: 4166,
          count: 3,
        },
        {
          id: 3,
          name: "苹果12",
          price: 7500,
          count: 2,
        },
        {
          id: 4,
          name: "OPPO",
          price: 2180,
          count: 4,
        },
      ],
      books2: [
        {
          name: "华为mate30",
          price: 3465,
        },
        {
          name: "华为mate40",
          price: 4166,
        },
        {
          name: "苹果12",
          price: 7500,
        },
        {
          name: "OPPO",
          price: 2180,
        },
      ],
    });
    const a = () => {
      state.flag = false;
    };
    const b = () => {
      state.flag = true;
    };

    const decrement = (index) => {
      state.books[index].count--; // index指定图书对象的id值减１
    };
    const increment = (index) => {
      state.books[index].count++; // index指定图书对象的id值加１
    };
    const removeHandle = (index) => {
      state.books.splice(index, 1); // 删除index指定的图书对象
      for (let i = 0; i < state.books.length; i++) {
        state.books[i].id = i + 1; // 重新排序计算所含数据的id值
      }
    };
    const del = () => {
      state.books.splice(0,6)
    }

    const filter = (price) => {
      return "￥" + price.toFixed(2);
    };
    const changeAllChecked = () => {
      if (state.checked) {
        //全选
        state.checkedData = state.books2;
      } else {
        state.checkedData = [];
      }
    };

    const computedName = computed(() => {
      let totalPrice = 0; // 初始化总价为０
      for (let i = 0; i < state.books.length; i++) {
        // 把数组中的每个元素的价格*数量，再相加到totalPrice
        totalPrice += state.books[i].price * state.books[i].count;
      }
      return totalPrice; // 返回总价
    });
    const add = (index) => {
      var arr2 = document.getElementsByClassName("choose");
      if (state.books.length == 0) {
        if (!arr2[index].checked) {
          alert("该商品未勾选！");
        } else {
          var book1 = {
            id: state.books.length + 1,
            name: state.books2[index].name,
            price: state.books2[index].price,
            count: 1,
          };
          state.books.push(book1);
          
        }
      } else {
        for (let i = 0; i < state.books.length; i++) {
          if (state.books2[index].name == state.books[i].name) {
            if (!arr2[index].checked) {
              alert("该商品未勾选！");

              break;
            }
            state.books[i].count++;

            break;
          } else if (i == state.books.length - 1) {
            book1 = {
              id: state.books.length + 1,
              name: state.books2[index].name,
              price: state.books2[index].price,
              count: 1,
            };
            state.books.push(book1);
            break;
          }
        }
      }
    };
    const addAllHandle = () => {
      var arr3 = document.getElementsByClassName("choose");
      for (let i = 0; i < arr3.length; i++) {
        if (arr3[i].checked) {
          add(i);
        }
      }
      alert("批量添加成功！");
    };
    return {
      ...toRefs(state),
      computedName,
      decrement,
      increment,
      removeHandle,
      filter,
      a,
      b,
      changeAllChecked,
      add,
      addAllHandle,
      del
    };
  },
};
</script>

<style scoped>
#bc {
  position: absolute;
  left: 31%;
  top: 45%;
}
#bc2 {
  position: absolute;
  left: 31%;
  top: 50%;
}
#ab {
  position: absolute;
  left: 31%;
}
#goods {
  position: absolute;
  left: 31%;
}
</style>
